<style>
.pure-img {
    max-height: 100%;
    width: auto;
}
.flag .pure-img {
    max-height: none;
    margin-top: -0.34rem;
}
.status-bar {
    position: fixed;
    bottom: 0;
    right: 0;
    box-shadow: 0 0 2rem 0 rgba(136, 152, 170, .3);
    color: #525f7f;
    background: #fff;
    z-index: 5;
    box-sizing: border-box;
}

.status-bar .inner {
    margin: 0.5em;
}

.status-bar .inner .flag {
    height: 2.6em;
    display: block;
    float: left;
    margin-right: 1em;
}

.status-bar .inner .status-info {
    font-weight: bold;
}

.status-bar .icon-con {
    height: 2.6em;
    text-align: right;
}

footer{
display:block !important;
}
    
@media screen and (max-width: 700px) {
.status-bar .icon-con {
    height: 2.5em;
}
}
</style>
<script src="<%=media%>/js/jquery.min.js"></script>
<script>
if(typeof jQuery == 'undefined'){
document.write('<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"><\/script>');
}
</script>
<div class="status-bar">
    <div class="inner">
        <div class="pure-g">
            <div class="pure-u-1-2">
                <span class="flag"><img src="/luci-static/bypass/flags/loading.svg" class="pure-img"></span> <span
                    class="status-info">获取中...</span>
            </div>
            <div class="pure-u-1-2">
                <div class="icon-con">
                    <img src="/luci-static/bypass/img/site_icon1_01.png" class="pure-img i1">
                    <img src="/luci-static/bypass/img/site_icon1_02.png" class="pure-img i2">
                    <img src="/luci-static/bypass/img/site_icon1_03.png" class="pure-img i3">
                    <img src="/luci-static/bypass/img/site_icon1_04.png" class="pure-img i4">
                </div>
            </div>
        </div>
    </div>
</div>


<script>
const _ASSETS = '/luci-static/bypass/';
const CHECK_IP_URL = '<%=url([[admin]], [[services]], [[bypass]], [[ip]])%>';

    var wW = $(window).width();

    function resize() {
        wW = $(window).width();
        lw = $(".main-left").width()
        $(".status-bar").width(wW - lw);
        $(".status-bar .flag").width($(".status-bar .flag").height() / 3 * 4);

        $(".flag-icon").each(function (index, el) {
            if ($(el).height < 60) {
                $(el).parent.height(60);
                $(el).width(60)
            } else {
                $(el).width($(el).height());
            }
        });
    }

    function wirte_status(data) {
        if (data.outboard) {
            json = data.outboardip;
            country = json.country;
            $(".flag img").attr("src", _ASSETS + "flags/" + json.flag + ".svg");
            $(".status-info").html(data.outboard + "<br>" + country);
        }
        data.baidu ? $(".i1").attr("src", _ASSETS + "img/site_icon_01.png") : $(".i1").attr("src", _ASSETS + "img/site_icon1_01.png");
        data.taobao ? $(".i2").attr("src", _ASSETS + "img/site_icon_02.png") : $(".i2").attr("src", _ASSETS + "img/site_icon1_02.png");
        data.google ? $(".i3").attr("src", _ASSETS + "img/site_icon_03.png") : $(".i3").attr("src", _ASSETS + "img/site_icon1_03.png");
        data.youtube ? $(".i4").attr("src", _ASSETS + "img/site_icon_04.png") : $(".i4").attr("src", _ASSETS + "img/site_icon1_04.png");
        setTimeout(function () { $("body").trigger("iploaded", [true]); }, 200);
    }
    XHR.poll(10, CHECK_IP_URL, null,
        function (x, data) {
            wirte_status(data);
        }
    );

    $(document).ready(function () {
        resize();
        $.getJSON(CHECK_IP_URL, wirte_status);
    });

    $(window).resize(resize);

</script>
